<template>
  <div class="login">
    <div class="box">
      <h3>注册</h3>
      <h4>已有账号？<router-link to="/login">登录</router-link></h4>
      <el-input v-model="uid" placeholder="邮箱/手机号码" ref="uid"></el-input>
      <el-input v-model="id" placeholder="用户名" ref="usrname"></el-input>
      <el-input v-model="pwd1" placeholder="密码" show-password ref="pwd1"></el-input>
      <el-input v-model="pwd2" placeholder="确认密码" show-password ref="pwd2"></el-input>
      <el-input v-model="checkCode" placeholder="验证码" show-password ref="code"></el-input>
      <el-button type="primary" v-on:click="getCode">获取验证码</el-button>
      <el-button type="primary" v-on:click="register">马上注册！</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:'RegisterView',
  data() {
    return {
      uid: '',
      id: '',
      pwd1: '',
      pwd2: '',
      e_mail: '',
      phone: '',
      registerType:'',
      checkCode: ''
    }
  },
  methods:{
    async getCode() {
      let uid = this.$refs.uid.value;
      this.uid = uid;
      let registerType = '';
      let email = '';
      let phonenum = '';
      var allNum = true;
      for (var i = 0; i < uid.length; i++) {
        if(uid.charAt(i) === '@'){
          registerType = 'e_mail';
          email = uid;
          this.e_mail = email;
          break;
        }
        if(!(uid.charAt(i) >= '0' && uid.charAt(i) <= '9')){
          allNum = false;
        }
      }
      if(registerType !== 'e_mail'){
        if(allNum && uid.length === 11){
          registerType = 'phone_number';
          phonenum = uid;
          this.phone = phonenum;
        }
        else alert("请输入正确的邮箱或手机号");
        return;
      }
      this.registerType = registerType;
      let {data} = await axios.post('http://localhost:8080/check',
          {type:registerType, e_mail:email, phone_number:phonenum});
      console.log(data);
      switch (data.errno){
        case '1001':
          alert("邮箱不存在");
          break;
        case '1002':
          alert("邮箱已注册");
          break;
        case '1':
          alert("邮箱验证码发送成功");
          break;
        case '1003':
          alert("手机号不存在");
          break;
        case '1004':
          alert("手机号已注册");
          break;
        case '2':
          alert("手机验证码发送成功");
          break;
        default:
          alert("其他错误，验证码发送失败");
          break;
      }
    },
    async register() {
      let registerType = this.registerType;
      let email = this.e_mail;
      let phone = this.phone;
      let uname = this.$refs.usrname.value;
      let password = this.$refs.pwd1.value;
      let password2 = this.$refs.pwd2.value;
      let checkCode = this.$refs.code.value;
      let {data} = await axios.post('http://localhost:8080/register',
          {type:registerType, e_mail:email, phone_number:phone, username:uname,
            password1:password, password2:password2, code:checkCode});
      console.log(data);
      switch (data.errno){
        case '2001':
          alert("验证码不正确");
          break;
        case '2002':
          alert("用户名长度不合规范：4-20");
          break;
        case '2003':
          alert("用户名不合规范：字母/数字/下划线");
          break;
        case '2004':
          alert("用户名已注册");
          break;
        case '2005':
          alert("密码长度不合规范：8-24");
          break;
        case '2006':
          alert("密码不合规范：同时包含大写字母、小写字母和数字");
          break;
        case '2007':
          alert("两次密码不同");
          break;
        case '1':
          alert("用户注册成功");
          await this.$router.push('/login');
          break;
        default:
          alert("其他错误，用户注册失败");
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.login{
  padding:10px;
}
.box{
  position: fixed;
  width:400px;
  height:550px;
  border:1px solid #ccc;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  line-height: 80px;
  background: lightblue;
  padding:10px;
  h3{
    text-align: center;
    margin:0 10px;
  }
  h4{
    text-align: left;
    margin:-40px 0px;
  }
  .button{
    border-radius: 12px;
  }
  .reg{
    position: absolute;
    width:400px;
    left:10px;
    top:350px;
  }
}
</style>